<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>一个女人学会写自己的名字意味着什么？</title>
    <link rel="stylesheet" href="resource\main.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  </head>

  <body>
    <h1 style="text-align: center">一个女人学会写自己的名字意味着什么？</h1>

    <div class="main-content">
      <h2>新女子夜校</h2>
      <p>
        林赛竹的微信名是“林春竹”，别人帮她申请的，不小心把“赛”写成了“春”。她不识字，在很长时间里没能意识到这个错误。
      </p>
      <p>
        林赛竹记得，早年打工时，大家排队领工资，领完签名，“女的不会签，男的就会签。”
      </p>
      <p>
        夜校共有4位老师，20岁的林楚玲拥有团队中最高的学历，初三。今年4月加入的黄碧莲读到了初一，21岁的吴瑶儿则在小学六年级辍学，34岁的蓝茂秀读到了初二（后来上中专）。
      </p>
    </div>
    <style>
      .tooltip {
        position: relative;
        display: inline-block;
        line-height: 1.2;
        border-bottom: 2px dotted black; /* If you want dots under the hoverable text */
      }

      /* Tooltip text */
      .tooltip .tooltiptext {
        visibility: hidden;
        width: 240px;
        background-color: #111;
        font-size: 14px;
        line-height: 2;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 130%;
        left: 50%;
        margin-left: -125px;
      }

      /* Show the tooltip text when you mouse over the tooltip container */
      .tooltip:hover .tooltiptext {
        visibility: visible;
      }
      .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
      }
    </style>
    <script>
      //   let content = $("p").text();
      $("p").each(function () {
        // console.log("被选中");
        let content = $(this).prop("lastChild").nodeValue;
        result = content.replace(
          "林赛竹",
          '<div class="tooltip">林赛竹<span class="tooltiptext">林赛竹介绍</span></div>'
        );
        $(this).html(result);
        console.log(result);
      });
    </script>
  </body>
</html>
